<template>
  <div class="withdrawal">
    <div class="header">
      <div class="title">
        <DollarCircleFilled class="icon" />充值中心
      </div>
    </div>
    <div class="user_info">
      <div class="header_img">
        <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSrefJE4iv-PKUtB6bYeFQhOZPSK5g70Usq1sFZO_Zt6w&s"
          alt="">
      </div>
      <div class="account">
        充值账号：<span>游客</span>  当前剩余次数：<span style="font-weight: 700;">{{ 0 }}</span>
      </div>
    </div>
      <div class="publications">
        增加发布次数
      </div>
    <div class="option">
      <p>充值金额：</p>
      <div :class="['item_moneny', item.num == checkedMoneny ? 'checkedMoneny' : '']" v-for="(item, index) of moneny"
        :key="index" @click="changeMoneny(item.num)">
        ￥{{ item.num }}
        <div class="getpush">{{ item.num * 2 }}发布  次数 </div>
      </div>
    </div>
    <div class="chongzhi">
      <p style="display: inline-block; margin-top: 50px;">充值方式：</p>
      <a-radio-group v-model:value="value">
        <a-radio :value="1"> 
          <WechatOutlined  style="font-size: 50px; color: #40ba4a;" />
        </a-radio>
        <!-- <a-radio :value="2"><img class="img"
            src="https://l.ruby-china.com/photo/2019/637f73bf-f398-4f0c-92b8-b2f723c6d3ce.jpg!large" alt="">
           </a-radio> -->
      </a-radio-group>
    </div>

    <div class="cope_with">
      应付金额： <span>{{ checkedMoneny }}元</span>  
    </div>

    <a-divider style="height: 1px; background-color: #27b0d6" />


    <div class="confirm_play">
      <a-button type="primary" color="#27b0d6">确认支付</a-button>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { reactive, ref } from "vue";
import { useRouter } from "vue-router";
import { message, Divider, Button } from 'ant-design-vue';
import {
  DollarCircleFilled,
  WechatOutlined
} from "@ant-design/icons-vue"

const value = ref<number>(1);
const moneny = reactive([
  {
    num: 10,
  },
  {
    num: 20,
  },
  {
    num: 30,
  },
  {
    num: 50,
  },
])

const checkedMoneny = ref<Number>(10);


const changeMoneny = (num: number) => {
  checkedMoneny.value = num;
}
</script>

<style lang="scss" scoped>
.withdrawal {
  max-width: 800px;
  margin: 0 auto;
  padding: 30px;

  .title {
    color: #fff;
    background-color: #27b0d6;
    padding: 8px 5px;
    border-radius: 10px;
    box-sizing: border-box;

    .icon {
      color: #fed638;
      font-size: 30px;
      vertical-align: middle;
      margin-right: 10px;
    }
  }

  .user_info {
    width: 100%;
    padding: 10px;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    background-color: #dff3f9;
    margin-top: 30px;

    .header_img {

      img {
        width: 50px;
        height: 50px;
        border-radius: 50%;
      }
    }

    .account {
      margin-left: 30px;

      span {
        color: #27b0d6;
      }
    }
  }
.publications {
  color: #000;
  font-weight: bold;
  font-size: large;
  margin-top: 30px;
}
  .option {
    display: flex;
    align-items: center;
    margin-top: 30px;

    .item_moneny {
      padding: 10px 12px;
      border: 1px solid #595656;
      border-radius: 7px;
      margin-right: 30px;
      text-align: center;
    }
    &:hover {
      cursor: pointer;
    }
  }

  .chongzhi {
    .img {
      width: 200px;
      height: 70px;
    }
  }

  .cope_with {
    margin-top: 50px;

    span {
      font-weight: 700;
      color: #27b0d6;
      margin-left: 10px;
      font-size: 25px;
    }
  }
}

.checkedMoneny {
  border: #27b0d6 1px solid !important;
  color: #27b0d6;
  font-weight: bold;
}</style>